<template>
  <div class="home-container">
    <div class="search-bar">
      <el-input
        v-model="searchName"
        placeholder="请输入名称查询"
        size="small"
        style="width: 300px;"
      >
        <template #suffix>
          <el-button icon="el-icon-search" @click="fetchData" circle></el-button>
        </template>
      </el-input>
    </div>

    <el-table :data="paginatedData" style="width: 100%" size="small">
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        background
        small
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElMessage } from 'element-plus';
import axios from 'axios';

export default defineComponent({
  components: {
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
    ElPagination,
  },
  setup() {
    const searchName = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);

    // 初始化测试数据
    const tableData = ref([
      {
        "name": "用户A",
        "description": "这是用户A的描述信息。"
      },
      {
        "name": "用户B",
        "description": "这是用户B的描述信息。"
      },
      {
        "name": "用户C",
        "description": "这是用户C的描述信息。"
      },
      {
        "name": "用户D",
        "description": "这是用户D的描述信息。"
      },
      {
        "name": "用户E",
        "description": "这是用户E的描述信息。"
      },
      {
        "name": "用户F",
        "description": "这是用户F的描述信息。"
      },
      {
        "name": "用户G",
        "description": "这是用户G的描述信息。"
      },
      {
        "name": "用户H",
        "description": "这是用户H的描述信息。"
      },
      {
        "name": "用户I",
        "description": "这是用户I的描述信息。"
      },
      {
        "name": "用户J",
        "description": "这是用户J的描述信息。"
      }
    ]);

    const fetchData = async () => {
      try {
        const response = await axios.get('/api/items', {
          params: {
            name: searchName.value,
            page: currentPage.value,
            pageSize: pageSize.value,
          },
        });
        tableData.value = response.data.items;
      } catch (error) {
        console.error("获取数据错误:", error);
        ElMessage.error('获取数据失败，请稍后再试');
      }
    };

    fetchData();

    const handleEdit = (index: number, row: any) => {
      console.log('编辑:', index, row);
      ElMessage.info(`编辑 ${row.name}`);
    };

    const handleDelete = (index: number, row: any) => {
      console.log('删除:', index, row);
      ElMessage.info(`删除 ${row.name}`);
      // 这里可以添加删除逻辑，比如调用后端API删除数据
    };

    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      fetchData();
    };

    const handleCurrentChange = (val: number) => {
      currentPage.value = val;
      fetchData();
    };

    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return tableData.value.slice(start, end);
    });

    return {
      searchName,
      currentPage,
      pageSize,
      tableData,
      fetchData,
      handleEdit,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
      paginatedData,
    };
  },
});
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-bar {
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-button {
  margin-right: 5px;
}

.el-button--mini {
  padding: 7px 15px;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
}

.el-pagination.is-background .btn-prev:hover,
.el-pagination.is-background .btn-next:hover,
.el-pagination.is-background .el-pager li:hover {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}

.el-pagination.is-background .el-pager li.active {
  background-color: #409eff;
  color: #fff;
}

.el-pagination.is-background .el-pager li.disabled {
  background-color: #f5f7fa;
  color: #c0c4cc;
  cursor: not-allowed;
}

.el-input__inner {
  border-radius: 4px;
}

.el-button--primary,
.el-button--danger {
  border-radius: 4px;
}

/* 添加一些悬停效果 */
.el-button:hover {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f56c6c;
  color: #fff;
}
</style>